
<template>
    <div class="fixed bg-slate-800 h-screen text-white transition-all overflow-y-auto"  :style="{width: menuStore.menuWidth }">
      <div class="flex items-center justify-center h-[64px]">
        <img src="@/assets/logo.png" class="h-[60px]" >
      </div>

  <el-menu :default-active="defaultActive"  :collapse="isCollapsed" @select="handleSelect">
    <template v-for="(item,index) in menus" :key="index">
      <el-menu-item :index="item.path">
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{item.name}}</span>
      </el-menu-item>
    </template>
  </el-menu>

      <!--      <el-menu default-active="2" class="el-menu-vertical-demo">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location/></el-icon>
            <span>navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item-one</el-menu-item>
            <el-menu-item index="1-2">item-two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="一级目录2">
            <el-menu-item index="1-3">2目录子集1</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-menu-item index="2">
          <el-icon><icon-menu/></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document/></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4" >
          <el-icon><document/></el-icon>
          <span>Navigator 4</span>
        </el-menu-item>
      </el-menu>-->
    </div>
</template>
<script setup>

import {Document, Location} from "@element-plus/icons-vue";
import {ref,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import {useMenuStore} from "@/stores/menu.js";

const menuStore = useMenuStore();

//是否折叠
const isCollapsed = computed(() => !(menuStore.menuWidth === '300px'))
const route = useRoute()
const router = useRouter()
const defaultActive = ref(route.path)
const menus = [
  {
    'name': '仪表盘',
    'icon': 'Monitor',
    'path': '/admin/index'
  },
  {
    'name': '文章管理',
    'icon': 'Document',
    'path': '/admin/article/list',
  },
  {
    'name': '分类管理',
    'icon': 'FolderOpened',
    'path': '/admin/category/list',
  },
  {
    'name': '标签管理',
    'icon': 'PriceTag',
    'path': '/admin/tag/list',
  },
  {
    'name': '博客设置',
    'icon': 'Setting',
    'path': '/admin/blog/setting',
  },
]

const handleSelect = (path)=>{
  console.log(path)
  router.push(path)
}
</script>

<style scoped>
.el-menu {
  background-color: rgb(30 41 59 / 1);
  border-right: 0;
}

.el-sub-menu__title {
  color: #fff;
}

.el-sub-menu__title:hover {
  background-color: #ffffff10;
}

.el-menu-item.is-active {
  background-color: var(--el-color-primary);
  color: #fff;
}

.el-menu-item.is-active:hover {
  background-color: var(--el-color-primary);
}

.el-menu-item {
  color: #fff;
}

.el-menu-item:hover {
  background-color: #ffffff10;
}
</style>
